<script setup>
import { useUserStore, useMessageStore } from "@/store";
import { computed, toRefs } from "vue";
import { useRouter } from "vue-router";
import websocket from "@/utils/websocket";

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

const router = useRouter();

const messageStore = useMessageStore();
const { hasUnreadMessages } = toRefs(messageStore);

const Exit = () => {
  websocket.closeWebSocket();
  userStore.removeData();
  router.push({ path: "/" });
};
</script>
<template>
  <div class="app-top-nav">
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <el-divider direction="vertical" />

      <div class="login-or-not" v-if="userStore.token">
        <li v-if="userInfo">
          <router-link to="/user">{{ userInfo?.unickname }}</router-link>
        </li>
        <el-divider direction="vertical" />
        <li>
          <a @click="Exit">退出登录</a>
        </li>
        <el-divider direction="vertical" />
      </div>
      <div v-else class="login-or-not">
        <li>
          <router-link to="/login">你好，请登录</router-link>
        </li>
        <el-divider direction="vertical" content-position />
      </div>
      <li>
        <router-link to="/messages" class="new-messages">
          <i class="iconfont icon-qizhi-01"></i>
          <el-badge :is-dot="hasUnreadMessages" class="item">新消息</el-badge>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<style scoped lang="less">
.app-top-nav {
  background-color: rgb(248, 247, 247);
  display: flex;
  justify-content: flex-end;
  height: 28px;
  font-size: 15px;
  ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 20px;
    .el-divider {
      margin: auto 10px;
    }
    li {
      margin: auto 10px;
      list-style-type: none;
      router-link {
        color: black;
      }
      a {
        text-decoration: none;
        color: black;
      }
      .new-messages {
        .item {
          margin-bottom: 1px;
          ::v-deep .el-badge__content {
            margin-top: 2px;
            right: 1px;
          }
        }
      }
    }
    .login-or-not {
      display: flex;
      flex-direction: row;
    }
  }
}
</style>